<template>
	<view class="p-24">
		<!-- 推广师信息 -->
		<view class="headUserInfo flex_b p-24" style="align-items:flex-start;">
			<image v-if="promoter.avatar" :src="$util.img(promoter.avatar)" mode="aspectFill"></image>
			<image v-else src="/static/userNone.png" mode=""></image>
			<view class="w-450">
				<view class="flex_b">
					<view class="font-36 font-weight white">{{promoter.realname||'未定义'}}</view>
					<view class="font-28 white">{{promoter.score||''}}</view>
				</view>
				<scroll-view class="label m-t-6 m-b-10" scroll-x="true">
					<view v-for="(item,index) in labelReturn(promoter.label)" :key="index" class="font-22 m-r-8">
						{{item}}
					</view>
				</scroll-view>
				<view class="white font-24">{{promoter.introduce}}</view>
			</view>
		</view>

		<uv-tabs :list="list" @click="clickFn" :scrollable="false" lineColor="#e5632b"></uv-tabs>

		<view class="m-t-20" v-if="indexNum==0">
			<block v-for="(item,i) in shoplist">
				<shopItem type="jqcj" :item="item"></shopItem>
			</block>
		</view>
		<view class="m-t-20" v-else-if="indexNum==1">
			<block v-for="(item,i) in shoplist">
				<shopItem type="chuzu" :item="item"></shopItem>
			</block>
		</view>
		<view class="" v-else-if="indexNum==2">
			<view v-for="(item,index) in shoplist" :key="index">
				<shopItem type="cangku" :item="item"></shopItem>
			</view>
		</view>
		<view class="videoSty" v-else-if="indexNum==3&&promoter.video">
			<video :src="$util.img(promoter.video)"></video>
		</view>
		<block v-if="indexNum==3&&!promoter.video">
			<noneList></noneList>
		</block>
		<block v-if="!shoplist.length&&indexNum!=3">
			<noneList></noneList>
		</block>
		<view class="bottom-mar"></view>

		<uv-load-more :status="loadStatus" />

		<view class="bomPosition" style="width: max-content;">
			<button style="width: 670rpx !important;" @click="$util.plone(promoter.mobile)">电话咨询</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '近期成交',
				}, {
					name: '推荐店铺',
				}, {
					name: '推荐厂仓',
				}, {
					name: '视频介绍',
				}],
				indexNum: 0,
				promoter: {},
				id: '',
				is_deal: '1',
				shoplist: [],
				loadShow: true,
				loadStatus: 'loadmore',
				pageNum: 1,
				listchangFang: [],
				shopis_deal: 1
			};
		},
		onLoad(res) {
			this.id = res.id
			this.getPromoterDetali(res.id)
			this.getShopList()
			this.cangku()
		},
		onShow() {
			if (this.id) {
				this.getShopList()
			}
		},
		onReachBottom() {
			// 触底加载
			if (this.indexNum == 2) {
				this.cangku()
			} else {
				this.getShopList()
			}
		},
		methods: {
			cangku() {
				// this.$api.sendRequest({
				// 	url: '/api/promoter/stashlist',
				// 	data: {
				// 		page: 1,
				// 		promoter_id: this.id,
				// 		is_deal: 0
				// 	},
				// 	success: res => {
				// 		this.listchangFang = res.data.data
				// 	}
				// })

				if (this.loadShow) {
					this.loadStatus = 'loading'
					this.loadShow = false
					// 1近期成交,0推荐店铺
					this.$api.sendRequest({
						url: '/api/promoter/stashlist',
						data: {
							page: this.pageNum,
							promoter_id: this.id,
							is_deal: 0
						},
						success: res => {
							this.shoplist.push(...res.data.data)
							if (res.data.data.length < 10) {
								this.loadShow = false
								this.loadStatus = 'nomore'
								return
							}
							this.pageNum++
							this.loadShow = true
							this.$forceUpdate()
						}
					})
				}
			},

			getShopList(e) {
				if (this.loadShow) {
					this.loadStatus = 'loading'
					this.loadShow = false
					// 1近期成交,0推荐店铺
					this.$api.sendRequest({
						url: '/api/promoter/shoplist',
						data: {
							page: this.pageNum,
							promoter_id: this.id,
							is_deal: this.shopis_deal
						},
						success: res => {
							this.shoplist.push(...res.data.data)
							if (res.data.data.length < 10) {
								this.loadShow = false
								this.loadStatus = 'nomore'
								return
							}
							this.pageNum++
							this.loadShow = true
							this.$forceUpdate()
						}
					})
				}
			},
			labelReturn(label) {
				if (label) {
					return label.split(',')
				} else {
					return []
				}
			},
			getPromoterDetali(id) {
				this.$api.sendRequest({
					url: '/api/promoter/detail',
					data: {
						id: id
					},
					success: res => {
						this.promoter = res.data
					}
				})
			},
			clickFn(e) {
				this.shoplist = []
				this.loadShow = true,
					this.loadStatus = 'loadmore',
					this.pageNum = 1
				this.indexNum = e.index
				if (e.index == 1) {
					this.shopis_deal = 0
				} else {
					this.shopis_deal = 1
				}
				if (this.indexNum == 2) {
					this.cangku()
				} else {
					this.getShopList()
				}
			}
		}
	}
</script>

<style lang="scss">
	.videoSty {
		video {
			width: 100%;
		}
	}

	.headUserInfo {
		background-color: #fa5b24;
		border-radius: 30rpx;

		image {
			width: 168rpx;
			height: 168rpx;
			border-radius: 10rpx
		}
	}

	.label {
		white-space: nowrap;
		/* 第二步：溢出隐藏 */
		overflow: hidden;

		view {
			display: inline-block;
			padding: 4rpx 10rpx;
			border-radius: 4px;
			opacity: 1;
			background: linear-gradient(0deg, #F1F4F8, #F1F4F8), #FFF8F5;
			font-family: PingFangSC;
			font-size: 20rpx;
			font-weight: normal;
			text-align: center;
			color: #58352B;
		}
	}
</style>
